<template>
	<view class="invite_wrapper">
		<!-- 页面导航栏 -->
		<view class="nav_bar">
			<view class="nav_bar--icon" @click="jumpBack">
				<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/common/arrowLeftWhite.svg"></image>
			</view>
			<view class="nav_bar--title">邀请好友</view>
			<view class="nav_bar--btn" @click="jumpfriendList">好友列表</view>
		</view>
		<view class="banner_wrap">
			<image src="https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/inviteBanner.png"></image>
		</view>
		<view class="invite_wrap">
			<view class="invite_tips">分享二维码给你的好友，获得奖励</view>
			<image src="http://qr.liantu.com/api.php?text=https://qb.wxlcoin.com/download/" class="code__image"></image>
			<view class="code_title">你的专属邀请码</view>
			<view class="invite_code">{{inviteCode}}</view>
			<button class="copy__btn" @click="copyCode">复制邀请码</button>
		</view>
		<view class="invite_info">
			<image :src="userInfo.avatar" class="invite_avatar"></image>
			<image :src="gradeImage" class="invite_grade"></image>
			<text class="nickname">{{userInfo.nickname}}</text>
			<text class="tips_info">邀请您加入PCD团队</text>
		</view>
		<button class="generate_btn" type="warn" @click="generatePoster('http://qr.liantu.com/api.php?text=https://qb.wxlcoin.com/download/')">生成海报</button>

		<canvas :class="{'poster_wrap':true,'show__poster_wrap':showPosterDialog}" id="posterCanvas" canvas-id="posterCanvas"></canvas>

		<wx-dialog :showDialog="showPosterDialog" @onHideDialog="onHideDialog">
			<template v-slot:dialogContent>
				<view class="dialog_wrap">
					<button type="warn" class="dialog_btn" @click="onSavePoster">保存图片</button>
				</view>
			</template>
		</wx-dialog>
	</view>
</template>

<script>
	import wxDialog from "@/components/wx-dialog/wx-dialog.vue"
	export default {
		data() {
			return {
				codeImg: '',
				inviteCode: '',
				userInfo: {},
				showPosterDialog: false,
				posterPath: '', // 海报路径
				// 等级图标
				picture: [{
						id: 0,
						name: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/v.png'
					},
					{
						id: 1,
						name: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/v-1.png'
					},
					{
						id: 2,
						name: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/v-2.png'
					},
					{
						id: 3,
						name: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/v-3.png'
					},
					{
						id: 4,
						name: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/v-4.png'
					},
					{
						id: 5,
						name: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/v-6.png'
					}
				]
			}
		},
		// 计算等级图片路径
		computed: {
			gradeImage() {
				if (this.userInfo.grade) {
					for (var i = 0; i < this.picture.length; i++) {
						if (this.userInfo.grade.substr(1) == this.picture[i].id) {
							return this.picture[i].name
						}
					}
				}
			}
		},
		onReady() {
			this.userInfo = uni.getStorageSync('user_info').baseInfo
			this.getInviteCode();
		},
		onPullDownRefresh() {
			this.getInviteCode();
		},
		methods: {
			onHideDialog() {
				this.showPosterDialog = false
			},
			// 获取邀请码
			getInviteCode() {
				this.$api.getInviteCode({}, res => {
					if (res.data.type == 'ok') {
						this.inviteCode = res.data.message.code;
						uni.stopPullDownRefresh(); //停止下拉刷新动画
					}
				})
			},
			copyCode() {
				uni.setClipboardData({
					data: this.inviteCode,
					success() {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			},
			// 返回
			jumpBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 好友列表
			jumpfriendList() {
				uni.navigateTo({
					url: './inviteFriends'
				});
			},
			// 生成海报
			generatePoster(path) {
				uni.showLoading({
					title: '生成中...'
				})
				let that = this;
				let system_info = uni.getSystemInfoSync();
				let ctx = uni.createCanvasContext('posterCanvas');
				uni.getImageInfo({
					src: 'https://pcdcoin.oss-cn-chengdu.aliyuncs.com/pcdApp/user/shareBg.png',
					success(res) {
						// 海报高度
						ctx.drawImage(res.path, 0, 0, system_info.windowWidth, uni.upx2px(1144));
						// 绘制下半部分容器
						ctx.fillStyle = '#FFFFFF';
						ctx.fillRect(0, uni.upx2px(1144), system_info.windowWidth, uni.upx2px(190));
						// 绘制文字
						
						ctx.font = '10px Arial';
						ctx.fillStyle = '#000';
						ctx.fillText('欢迎注册PCD Cloud', uni.upx2px(200), uni.upx2px(1195))
						ctx.fillText(`${that.userInfo.nickname}:邀请码(${that.inviteCode})`, uni.upx2px(200), uni.upx2px(1245))
						ctx.fillText('邀请您加入PCD团队', uni.upx2px(200), uni.upx2px(1295))
						// 绘制二维码
						ctx.drawImage(path, uni.upx2px(570), uni.upx2px(1168), uni.upx2px(143), uni.upx2px(143));
						// 绘制头像
						ctx.arc(uni.upx2px(116), uni.upx2px(1240), 30, 0, 2 * Math.PI)
						ctx.setStrokeStyle('#ffffff')
						ctx.stroke()
						ctx.clip()
						ctx.drawImage(that.userInfo.avatar, uni.upx2px(16), uni.upx2px(1140), uni.upx2px(200), uni.upx2px(200));
						ctx.drawImage(that.gradeImage, uni.upx2px(125), uni.upx2px(1255), uni.upx2px(40), uni.upx2px(40));
						ctx.draw(false, () => {
							uni.canvasToTempFilePath({
								x: 0,
								y: 0,
								width: system_info.windowWidth,
								height: uni.upx2px(1334),
								canvasId: 'posterCanvas',
								success: function(res) {
									that.posterPath = res.tempFilePath
									that.showPosterDialog = true
								},
								fail(e) {
									uni.showToast({
										title: '生成海报失败',
										icon: 'none'
									});
								},
								complete(){
									uni.hideLoading()
								}
							});
							
						})
					},
					fail(error) {
						console.log(error);
					}
				});
			},
			// 保存图片到用户手机相册
			onSavePoster() {
				const that = this
				// #ifdef  APP-PLUS
				uni.saveImageToPhotosAlbum({
					filePath: this.posterPath,
					success: function() {
						uni.showToast({
							title: '已保存到相册中'
						})
					},
					complete:function(){
						that.showPosterDialog = false
					}
				})
				// #endif
			}
		},
		components: {
			wxDialog
		}
	}
</script>

<style lang="scss" scoped>
	.invite_wrapper {
		height: 100vh;
		background-color: #ffffff;
		overflow: auto;
	}

	.nav_bar {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 140upx;
		line-height: 200upx;
		box-shadow: 2upx 0 10upx rgba(0, 0, 0, .2);
		background-color: #25263D;
		color: #FFFFFF;

		.nav_bar--icon {
			margin-top: 10upx;
			margin-left: 20upx;

			image {
				width: 35upx;
				height: 35upx;
			}
		}

		.nav_bar--title {
			margin-left: 10%;
			font-size: 16px;
		}

		.nav_bar--btn {
			margin-right: 20upx;
			font-size: 12px;
		}
	}

	.banner_wrap {
		width: 100%;
		height: 400upx;
		margin-top: 140upx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.invite_wrap {
		display: flex;
		flex-direction: column;
		align-items: center;

		.invite_tips {
			margin-top: 35upx;
			font-size: 9px;
			color: #D5D6DA;
		}

		.code__image {
			width: 268upx;
			height: 268upx;
			margin-top: 23upx;
			box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
		}

		.code_title {
			margin-top: 26upx;
			font-size: 12px;
		}

		.invite_code {
			margin-top: 22upx;
			font-size: 20px;
			font-weight: 700;
		}

		.copy__btn {
			width: 150upx;
			height: 50upx;
			margin-top: 18upx;
			line-height: 50upx;
			background-color: #F2F2F2;
			font-size: 7px;
			color: #AEAEAE;
		}
	}

	.invite_info {
		position: relative;
		height: 139upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 47upx 38upx 42upx 38upx;
		border-top: 1px solid #D5D6DA;
		border-bottom: 1px solid #D5D6DA;

		.invite_avatar {
			width: 90upx;
			height: 90upx;
			border-radius: 50%;
		}

		.invite_grade {
			width: 31upx;
			height: 31upx;
			position: absolute;
			top: 85upx;
			left: 60upx;
		}

		.nickname {
			flex: 1;
			margin-left: 16upx;
			color: #E03E4D;
			font-size: 13px;
		}

		.tips_info {
			font-size: 13px;
		}
	}

	.generate_btn {
		margin: 50upx auto;
		width: 92%;
		border-radius: 50upx;
		background-color: #E03E4D;
	}

	.dialog_wrap {
		width: 100%;
		height: 294upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 20upx 20upx 0 0;

		.dialog_btn {
			width: 90%;
			height: 80upx;
			line-height: 80upx;
			border-radius: 80upx;
			background-color: #E03E4D;
			font-size: 18px;
		}
	}

	.poster_wrap {
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
		height: 1334upx;
		transform: scale(0.6);
		box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
		z-index: 1000;
		visibility:hidden;
	}
	.show__poster_wrap{
		visibility: visible;
	}
</style>
